<template>
    <div>
        <div class="contextmenu"
            v-if="visible"
            :style="posStyle"
            @click.stop="">
            <ul>
                <li
                    v-for="(item, index) in dpList"
                    @click.stop="clickItem(item, index)"
                    :key="index">{{ item.label }}</li>
            </ul>
        </div>
    </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
const router = useRouter()
const store = useStore()

onMounted(() => {

})

const visible = ref(false)
const posi = ref({
    top: 0,
    left: 0
})
const posStyle = ref({})
const dpList = ref([])

function closeList() {
    visible.value = false
}

let promiseResolve = null;
let promiseReject = null

function open(pos, list) {
    return new Promise((resolve, reject) => {
        promiseResolve = resolve;
        promiseReject = reject;
        closeList()
        document.body.addEventListener("click", closeList);
        console.log(pos);
        let styleO = {
            top: pos.top + 'px',
            left: pos.left + 'px',
        }

        if(pos.top + 10 + list.length * 32 > innerHeight - 10) {
            delete styleO.top
            styleO.bottom = (innerHeight - pos.top) + 'px'
        }
        if( pos.left + 120 > innerWidth - 10 ) {
            delete styleO.left
            styleO.right = (innerWidth - pos.left) + 'px'
        }
        posStyle.value = styleO
        dpList.value = list;
        visible.value = true

    })
}

function clickItem(item, index) {
    closeList()
    promiseResolve(item, index)
}

defineExpose({
    open
})



</script>

<style lang="less" scoped>

.contextmenu{
    width: 120px;
    position: fixed;
    box-shadow: 0 0 10px 0px #999;
    border-radius: 3px;
    background: #fff;
    padding: 10px 0;
    z-index: 1000;
    *{
        box-sizing: border-box;
    }
    ul{
        li{
            width: 100%;
            height: 32px;
            font-size: 14px;
            line-height: 32px;
            padding: 0 15px;
            color: #444;
            &:hover{
                background-color: #f1f1f1;
            }
        }
    }
}


</style>
